/**
 * @description  流动性风险
 * @author shenhong
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { XYAxisChartsC } from '../../../comps';

class ShowEcharts extends PureComponent {
  constructor() {
    super();
    this.state = {
      data: { xAxis: undefined, series: undefined },
    };
  }
  componentDidMount() {
    const { dispatch, portfolioCode, formData, args } = this.props;
    const query = {
      portfolioCode: portfolioCode,
      dataDate: formData.dataDate,
      stockRate: args.stockRate,
      stockDays: args.stockDays,
      bondRate: args.bondRate,
      bondDays: args.bondDays,
      FundRate: args.FundRate,
      FundDays: args.FundDays,
    };
    if (formData.benchMark) {
      query.benchMark = formData.benchMark;
    }
    dispatch({
      type: 'liquidityRiskM/save',
      payload: { echartsData: { xAxis: [], series: undefined } },
    });
    dispatch({
      type: 'liquidityRiskM/getEchartsData',
      payload: query,
    });
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const { formData, portfolioCode, args } = nextProps;
    if (
      portfolioCode !== this.props.portfolioCode ||
      formData.dataDate !== this.props.formData.dataDate ||
      formData.benchMark !== this.props.formData.benchMark ||
      JSON.stringify(args) !== JSON.stringify(this.props.args)
    ) {
      const { dispatch } = this.props;
      const query = {
        portfolioCode: portfolioCode,
        dataDate: formData.dataDate,
        stockRate: args.stockRate,
        stockDays: args.stockDays,
        bondRate: args.bondRate,
        bondDays: args.bondDays,
        FundRate: args.FundRate,
        FundDays: args.FundDays,
      };
      if (formData.benchMark) {
        query.benchMark = formData.benchMark;
      }
      dispatch({
        type: 'liquidityRiskM/save',
        payload: { echartsData: { xAxis: [], series: undefined } },
      });
      dispatch({
        type: 'liquidityRiskM/getEchartsData',
        payload: query,
      });
    }
  }

  changeSeries = (arr) => {
    let datas = arr;
    if (datas && datas.length) {
      datas.map((item) => {
        if (item.name == '基准变现比例' || item.name == '组合变现比例') {
          item.type = 'line';
          item.yAxisIndex = 1;
        }
      });
    }
    return datas;
  };

  ShowEcharts = () => {
    const {
      liquidityRiskM: { echartsData },
    } = this.props;
    const xAxis = echartsData.xAxis;
    const series = this.changeSeries(echartsData.series);
    return (
      <div>
        <XYAxisChartsC dataZoom={false} yAxisUnit={['变现金额(万元)', '变现比例(%)']} series={series} xAxis={xAxis} height={278} type='bar' />
      </div>
    );
  };

  render() {
    return <div>{this.ShowEcharts()}</div>;
  }
}

export default connect(({ liquidityRiskM }) => ({ liquidityRiskM }))(ShowEcharts);
